<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>修改密码</title>

<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css">
<link href="./bootstrap/css/styles.css" rel="stylesheet">

</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="CustomerManage.html"><span>实验动物</span>档案管理</a>
				<ul class="user-menu">
					<li class="dropdown pull-right">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span> User <span class="caret"></span></a>
						<ul class="dropdown-menu" role="menu">
							<li><a href="http://www.cau.edu.cn"><span class="glyphicon glyphicon-user"></span> Profile</a></li>
							<li><a href="#"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
							<li><a href="login.jsp"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
						</ul>
					</li>
				</ul>
			</div>

		</div><!-- /.container-fluid -->
	</nav>
		<div id="sidebar-collapse" class="col-sm-3 col-lg-2 sidebar">
		<form role="search">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="Search">
			</div>
		</form>
		<ul class="nav menu">
			<li class="parent ">
				<a href="#">
					<span class="glyphicon glyphicon-list"></span> 用户信息管理 <span data-toggle="collapse" href="#sub-item-1" class="icon pull-right"><em class="glyphicon glyphicon-s glyphicon-plus"></em></span>
				</a>
				<ul class="children collapse" id="sub-item-1">
					<li>
						<a class="" href="CustomerPersonalInformation.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 个人信息
						</a>
					</li>
					<li>
						<a class="" href="CustomerChangePassword.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 修改密码
						</a>
					</li>
				</ul>
			</li>

			<li class="parent ">
				<a href="#">
					<span class="glyphicon glyphicon-list"></span> 档案处理 <span data-toggle="collapse" href="#sub-item-2" class="icon pull-right"><em class="glyphicon glyphicon-s glyphicon-plus"></em></span>
				</a>
				<ul class="children collapse" id="sub-item-2">
					<li>
						<a class="" href="CustomerCreateFile.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 档案填写
						</a>
					</li>
					<li>
						<a class="" href="CCustomerQueryFile.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 档案查询
						</a>
					</li>
					<li>
						<a class="" href="CustomerUpdatefile.jsp">
							<span class="glyphicon glyphicon-share-alt"></span> 档案修改
						</a>
					</li>
				</ul>
			</li>

			<li role="presentation" class="divider"></li>
			<li><a href="login.jsp"><span class="glyphicon glyphicon-user"></span>登录页面</a></li>
		</ul>
		<div class="attribution">Created by <a href="#">软工第9组</a></div>
	</div><!--/.sidebar-->


	<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
		<div class="row">
			<ol class="breadcrumb">
				<li><a href="CustomerManage.html"><span class="glyphicon glyphicon-home"></span></a></li>
				<li class="active">用户信息管理 > 修改密码</li>
			</ol>
		</div>



		<!-- 从这开始添加代码 -->

					<div class="container">
			 			<div class="row">
			  				<div class="col-md-4"></div>
			  				<div class="col-md-4">
					   			<form class="form-signin" >
					    			<h2 class="form-signin-heading"><center>修改密码</center></h2>
					    			<br>
					    			<div id="info"></div>
					    			原始密码:<input type="password" name="password1" id="password1" class="form-control" placeholder="请输入原始密码" required autofocus><br>
					    			密码:<input type="password" name="password2" id="password2" class="form-control" placeholder="请输入密码" required><br>
					    			重复密码:<input type="password" name="password3"  class="form-control" placeholder="请再次输入密码" required maxLength="16"><br>
					    			<center>
					    				<button type="text" class="btn btn-primary" id="btn-reg" style="width:25%;">修改</button>
					    				<a href="login.jsp" class="btn btn-default" id="btn-reg2" style="width:25%;">返回登录</a>
					    			</center>
					   			</form>
			  				</div>
			  				<div class="col-md-4"></div>
			 			</div>
			 		</div>
				</body>


			</div>
		</div>
	</div>

	<script src="./bootstrap/js/jquery-3.1.0.min.js"></script>
	<script src="./bootstrap/js/bootstrap.min.js"></script>

	<script>
        $("#btn-reg").on("click",function () {
            let password1 = $("input[name='password1']").val();
            let password2 = $("input[name='password2']").val();
            let password3 = $("input[name='password3']").val();
            if (!password1) {
                alert("原始密码不能为空");
                return;
            }
            if (!password2) {
                alert("新密码不能为空");
                return;
            }
            if (!password3) {
                alert("新密码不能为空");
                return;
            }
            if (password2 != password3) {
                alert("两次输入密码不对");
                return;
            }
            let id = localStorage.getItem("id");
            $.ajax({
                url: '<%=basePath%>/ChangePassword',
                data: {id,password1,password2},
                type: 'POST',
                dataType: 'json',
                async:false,
                success: function(response) {
                	console.log(response)
					if (response.msg == 'OK' || response.msg == 'ok') {
						alert("操作成功");
					} else {
						alert(response.msg);
					}
                },
                error: function() {
                    alert("操作失败");
                }
            });
        })


		!function ($) {
 		    $(document).on("click","ul.nav li.parent > a > span.icon", function(){
		        $(this).find('em:first').toggleClass("glyphicon-minus");
		    });
		    $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
		}(window.jQuery);
		/**
		$(window).on('resize', function () {
			  if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
			})
			$(window).on('resize', function () {
			  if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
			})
			*/
	</script>

</body>

</html>
